<template>
	<div class="flowcontainer">
		<div class="crumb">
			<span>当前位置：</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>合作出版社</el-breadcrumb-item>

			</el-breadcrumb>
		</div>
		<div>
			<div class="left">
				<div class="top">
					<div class="titlebox">
						<p>出版类型</p>
					</div>
					<div class="contentbox">
						<div>
							<img src="@/assets/flow/wenxue.png" alt="/">
							<span>文学创作</span>
						</div>
						<div>
							<img src="@/assets/flow/jiaocai.png" alt="/">
							<span>教材教辅</span>
						</div>
						<div>
							<img src="@/assets/flow/xueshu.png" alt="/">
							<span>学术专著</span>
						</div>
					</div>
				</div>
				<div class="bottom">
					<div class="titlebox">
						<p>联系方式</p>
					</div>
					<div class="qrcode">
						<div>
							<img :src="codeImage" alt="" />
							<!-- <img src="@/assets/flow/qr.png" alt=""> -->
						</div>
						<span>微信扫描二维码联系客服</span>
					</div>
					<div class="contact">
						<p>联系电话</p>
						<span>{{name}} {{phone}}</span>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="publishlist">
					<PublishHouseItem v-for="(item, index) in pressList" :key="index" :publish="item"></PublishHouseItem>
				</div>
				<div class='block'>
					<el-pagination :current-page="page" :page-size="limit" :total="total"
						layout="total, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
						@current-change="pageCurrentChangeHandle">
					</el-pagination>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import PublishHouseItem from '@/components/PublishHouseItem/PublishHouseItem.vue'
	export default {
		data() {
			return {
				name: localStorage.getItem('name'),
				phone: localStorage.getItem('phone'),
				pressList: [],
				//获取新书接口的参数
				order: '', // 排序，asc／desc
				orderField: '', // 排序，字段
				page: 1, // 当前页码
				limit: 5, // 每页数
				total: 0,
				//公司变量
				corder: '',
				corderField: '',
				cpage: 1,
				climit: 5,
				companyInfo: [],
				codeImage: "",
			}
		},
		methods: {
			getPress() {
				this.$http.get(
					`/bookManagement/press/page?order=${this.order}&orderField=${this.orderField}&page=${this.page}&limit=${this.limit}`
					).then((res) => {
					// console.log(res.data.data.list);
					this.total = res.data.data.total;
					this.pressList = res.data.data.list;
				}).catch(() => {})
			},
			pageSizeChangeHandle(val) {},
			pageCurrentChangeHandle(val) {
				this.page = val;
				this.pressList = [];
				this.$http.get(
					`/bookManagement/press/page?order=${this.order}&orderField=${this.orderField}&page=${this.page}&limit=${this.limit}`
					).then((res) => {
					console.log(res.data.data.list);
					this.total = res.data.data.total;
					this.pressList = res.data.data.list;
				}).catch(() => {})
			},

			getCompanyInfo() {
				this.$http.get(
					`/bookManagement/company/page?order=${this.corder}&orderField=${this.corderField}&page=${this.cpage}&limit=${this.climit}`
					).then((res) => {
					// console.log(res.data.data.list);
					this.companyInfo = res.data.data.list;
					this.codeImage = this.companyInfo[0].image;
				}).catch(() => {})
			},
		},
		mounted() {
			this.getPress();
			this.getCompanyInfo();
		},
		components: {
			PublishHouseItem
		}
	}
</script>

<style scoped>
	.flowcontainer {
		width: 100%;
		height: 100%;
		/* min-height: 1130px; */
		background: rgb(239, 242, 243);
	}

	.crumb {
		height: 50px;
		margin: 0 240px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.crumb span {
		color: rgb(3, 3, 3);
		font-family: PingFang SC;
		font-size: 18px;
		letter-spacing: 0px;
	}

	.flowcontainer>div:nth-child(2) {
		height: 100%;
		min-height: 1130px;
		display: flex;
		flex-direction: row;
		margin: 0 240px;

	}

	.left {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.left p {
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 22px;
		line-height: 22px;
		letter-spacing: 0px;
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.left .top {
		height: 300px;
		background-color: white;
		display: flex;
		flex-direction: column;
	}

	.left .top>div:first-child {
		flex: 1;
	}

	.titlebox {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left .top>div:last-child {
		flex: 2;
		border-top: 2px solid rgb(239, 242, 243);
		;
	}

	.top .contentbox {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}

	.top .contentbox img {
		height: 80px;
		width: 80px;
	}

	.top .contentbox span {
		display: block;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;
		font-weight: undefined;
		line-height: 30px;
		letter-spacing: 0px;
	}

	.left .bottom {
		height: 700px;
		background-color: white;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
	}

	.bottom>div:first-child {
		flex: 1;
	}

	.bottom>div:last-child {
		flex: 2;
	}

	.qrcode {
		flex: 6;
		border-top: 2px solid rgb(239, 242, 243);
		border-bottom: 2px solid rgb(239, 242, 243);
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}

	.qrcode>div {
		background-color: rgb(239, 242, 243);
		margin: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.qrcode img {
		width: 300px;
		height: 300px;
	}

	.qrcode span {
		display: inline-block;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 20px;

		line-height: 30px;
		letter-spacing: 0px;
		text-align: center;
	}

	.contact {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
	}

	.contact p {
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 30px;
		line-height: 44px;
		letter-spacing: 0px;
		text-align: left;
	}

	.contact span {
		display: inline-block;
		color: rgb(0, 27, 39);
		font-family: PingFang SC;
		font-size: 25px;
		line-height: 37px;
		letter-spacing: 0px;
		text-align: left;
	}

	.right {
		flex: 3;
		margin-left: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 30px;
	}

	.publishlist>div:first-child {
		margin-top: 0;
	}






	.block {
	padding:30px 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

<style>
.el-breadcrumb__inner{
	font-size: 18px !important;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #24797d;
}
	.el-pagination {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.el-pagination .btn-next,
	.el-pagination .btn-prev {
		padding: 0;
		background: transparent;
	}

	.el-pagination .btn-next .el-icon,
	.el-pagination .btn-prev .el-icon {
		display: block;
		font-size: 0.0625rem;
		font-size: 30px;
		/* color:rgb(239, 242, 243); */
		color: lightgrey;
		/* font-weight: 700; */
		background: transparent;

	}

	.el-pager li {
		height: 35px;
		line-height: 35px;
		background: transparent;

	}

	.el-pager li:hover {
		color: rgb(5, 97, 54);
	}

	.el-pagination button {
		/* border: none; */
		/* padding: 0 0.03125rem; */
		background: transparent;
		border: 1px solid lightgrey;
		border-radius: 5px;
		/* padding: 5px 0 10px 0; */
		width: 50px;
		height: 35px;
	}

	.el-pagination__jump {
		height: 35px;
		line-height: 35px;
	}

	.el-pager li.active {
		color: rgb(5, 97, 54);

	}

	.el-pagination__editor.el-input .el-input__inner {
		background: transparent;
	}
</style>
